/**
 * @summary: 包含二级菜单操作的悬浮按钮，非复用组件
 * @author: lixinxiang@vv.cn
 */

import React, { useState } from 'react';
import { IconService } from '@/components/Custom/Icons';
import styles from './fab.less';

const FAB = ({ onClick }) => {
    const [btnRight, setBtnRight] = useState('-32px');
    const handleMouseEnter = () => {
        setBtnRight(0);
    };
    const handleMouseLeave = () => {
        setBtnRight('-32px');
    };
    return (
        <div
            className={styles.wrap}
            style={{ right: btnRight }}
            onClick={onClick}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
        >
            <IconService style={{ fontSize: '20px' }} />
        </div>
    );
};

export default FAB;
